<template>
  <div class="seed-email">
    <h4>[分桶测试][客户端]2019年客户端测试A-G组测试结果发送</h4>
    <p>经过了7天测试，剩余时间14天，测试进度30%(7/21天)</p>
    <hr>
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" width="100%"/>
    </el-row>
    <hr>

    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="" prop="id" sortable="custom" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始日期" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.starttime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束日期" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.endtime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="PV" align="center" width="95">
        <template slot-scope="scope">
          <span v-if="scope.row.pv">{{ scope.row.pv }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column label="VV" align="center" width="95">
        <template slot-scope="scope">
          <span v-if="scope.row.vv">{{ scope.row.vv }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" class-name="status-col" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
import LineChart from '../module/line_chart.vue'
import PanelGroup from '../module/panel_group.vue'
import { getEmail } from '@/api/table'
const lineChartData = {
  demo01: {
    expectedData: [1020, 1220, 1621, 1314, 1035, 1260, 1165],
    actualData: [1230, 812, 931, 1154, 1462, 1540, 1465]
  },
  demo02: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  demo03: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  demo04: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Home',
  components: { PanelGroup, LineChart },
  data() {
    return {
      list: null,
      item: null,
      lineChartData: lineChartData.demo01
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getEmail(this.item).then(response => {
        this.list = response.data
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.seed-email{padding: 0 30px;}
hr{margin: 20px 0;}
</style>
